<template>
  <div>
    <a-form :model="formState" ref="userDataTag">
      <a-form-item name="deptIds">
        <a-transfer :dataSource="dataTagList" v-model="formState.dataTagIds" :listStyle="{ width: '45%', height: '480px' }" :titles="[' 可选数据标识', ' 已选数据标识']" :render="item => item.title" :target-keys="formState.dataTagIds" @change="handleTransferChange" filterable></a-transfer>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="UserDataTag" setup>
import { reactive, ref } from 'vue';
import { getDataTagList, querySetDataTag, setUserDataTag } from '@/views/sys/user/data/user.api';

const userDataTag = ref();
const dataTagList = ref();
const userId = ref();
const formState = reactive({
  dataTagIds: [],
});

/**
 * 设置数据
 * @param data
 */
async function setData(data) {
  userId.value = data.record.userId;
  let dataTagIds = await querySetDataTag({
    userId: userId.value,
  });
  getDataTagList({}).then(data => {
    data.map(item => {
      item.key = item.dataTagId;
      item.title = item.dataTagName;
    });
    dataTagList.value = data;
    formState.dataTagIds = dataTagIds;
  });
}

/**
 * 穿梭框change
 * @param targetKeys
 * @param direction
 * @param moveKeys
 */
function handleTransferChange(targetKeys, direction, moveKeys) {
  formState.dataTagIds = targetKeys;
}

/**
 * 提交已分配部门
 */
async function handleSubmit(drawerEmit) {
  userDataTag.value.validate().then(() => {
    setUserDataTag({
      userId: userId.value,
      dataTagIds: formState.dataTagIds.join(','),
    });
  });
}

/**
 * 暴露给父组件调用的方法
 */
defineExpose({
  setData,
  handleSubmit,
});
</script>
